<template>
	<view>
		<!--竖版-->
		<view class="container" v-if="direction=='vertical'" >
			<view class="card-img">
				<image mode="aspectFill" src="http://imgv.bawangdao.com/static/image/index/food.png"></image>
				<view class="card-tag1">
					<view class="ico">
						<image src="http://imgv.bawangdao.com/static/image/index/location.png"></image>
					</view>
					<view class="text">500米</view>
				</view>
				<view class="card-tag2">
					<view class="ico">
						<image src="http://imgv.bawangdao.com/static/image/index/hot.png"></image>
					</view>
					<view class="text">10W</view>
				</view>
			</view>
			<view class="card-info">
				<view class="title">踏青美食赏食赏味道</view>
				<view class="price">
					<view class="text">108元/位</view>
					<view class="tag">50份</view>
				</view>
				<view class="label-info">
					<view class="tag">赞助商</view>
					<view class="text">霸王测试账号</view>
				</view>
				<view class="label-time" v-if="type!=='2'" >
					<view class="time"><image src="http://imgv.bawangdao.com/static/image/index/shijian.png"></image></view>
					<view class="text">07月09日 16:12自动开奖</view>
				</view>
				<view class="btn" @click="toLogin"> {{type!=='2'?'参与':'领券'}} </view>
			</view>
		</view>
		<!--横版-->
		<view class="container2" v-if="direction=='transverse'" >
			<view class="card-img">
				<image src="http://imgv.bawangdao.com/static/image/index/banner2.png"></image>
				<view class="card-tag1">
					<view class="ico">
						<image src="http://imgv.bawangdao.com/static/image/index/location.png"></image>
					</view>
					<view class="text">500米</view>
				</view>
				<view class="card-tag2">
					<view class="ico">
						<image src="http://imgv.bawangdao.com/static/image/index/hot.png"></image>
					</view>
					<view class="text">10W</view>
				</view>
			</view>
			<view class="card-info">
				<view class="title">
					<view class="titles" >
						踏青美食赏食赏味道 
					</view>
					<view class="text">108元/位</view>
					<view class="tag" v-if="type!=='2'" >50份</view>
				</view>
				<view class="label-info" :style="{marginTop: type==='2'?'15px':''}" >
					<view class="tag">赞助商</view>
					<view class="text">霸王测试账号</view>
				</view>
				<view class="label-time" v-if="type!=='2'" >
					<view class="time"><image src="http://imgv.bawangdao.com/static/image/index/shijian.png"></image></view>
					<view class="text">07月09日 16:12自动开奖</view>
				</view>
				<view class="btn" @click="toLogin" :style="{bottom: type==='2'?'5px':''}" > {{type!=='2'?'参与':'领券'}} </view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		direction:{
			type: String,
			default: 'vertical'   //transverse  vertical
		},
		type: {
			type: String,
			default: '1'
		}
	},
	data() {
		return {};
	},
	methods: {
		toLogin() {
			// #ifdef APP-PLUS
			uni.navigateTo({
				url: '/pages/login/login'
			});
			// #endif

			// #ifdef MP-WEIXIN
			uni.navigateTo({
				url: '/pages/login-wx/login-wx'
			});
			// #endif
		}
	}
};
</script>

<style lang="less">
.container {
	width: 45vw;
	background: #ffffff;
	border-radius: 32rpx;
	.card-img {
		width: 45vw;
		height: 45vw;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;
		image {
			width: 45vw;
			height: 45vw;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
		}
		.card-tag1 {
			position: absolute;
			bottom: 20rpx;
			left: 18rpx;
			padding: 4rpx 16rpx 4rpx 6rpx;
			background: rgba(0, 0, 0, 0.41);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			.ico {
				width: 20px;
				height: 20px;
				image {
					width: 20px;
					height: 20px;
				}
			}
			.text {
				height: 18px;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight:500;
				font-family:PingFangSC-Medium,PingFang SC;
			}
		}
		.card-tag2 {
			position: absolute;
			bottom: 20rpx;
			left: 160rpx;
			padding: 4rpx 16rpx 4rpx 6rpx;
			background: rgba(0, 0, 0, 0.41);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			.ico {
				width: 20px;
				height: 20px;
				image {
					width: 20px;
					height: 20px;
				}
			}
			.text {
				height: 18px;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight:500;
				font-family:PingFangSC-Medium,PingFang SC;
			}
		}
	}
	.card-info {
		padding: 15rpx 10rpx 15rpx 10rpx;
		.title {
			font-size: 32rpx;
			// font-weight: bold;
			font-family:PingFangSC-Semibold,PingFang SC;
			font-weight:600;
		}
		.price {
			display: flex;
			align-items: center;
			.text {
				font-size: 32rpx;
				// font-weight: bold;
				font-family:PingFangSC-Semibold,PingFang SC;
				font-weight:600;
			}
			.tag {
				width: 80rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #fe7063;
				margin-left: 20rpx;
				font-weight: bold;
				font-size: 24rpx;
				border-radius: 30rpx;
				box-sizing: border-box;
				border: 2rpx solid #fe7063;
				background: rgba(254, 112, 99, 0.14);
			}
		}
		.label-info {
			display: flex;
			align-items: center;
			.tag {
				width: 80rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				color: #ffffff;
				font-size:20rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				border-radius: 30rpx;
				box-sizing: border-box;
				border: 1rpx solid rgba(219, 167, 99, 1);
				background:linear-gradient(270deg,rgba(255,219,172,0.93) 0%,rgba(216,164,94,1) 100%);
			}
			.text {
				margin-left: 10rpx;
				font-size:24rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				color: rgba(153, 153, 153, 1);
			}
		}
		.label-time {
			display: flex;
			align-items: center;
			height: 30px;
			.time {
				height: 30px;
				image {
					width: 15px;
					height: 15px;
				}
			}
			.text {
				height: 30px;
				margin-left: 10rpx;
				font-size: 24rpx;
				color: rgba(153, 153, 153, 1);
			}
		}
		.btn {
			height: 80rpx;
			line-height: 80rpx;
			background: rgba(255, 100, 86, 1);
			font-weight: blod;
			font-size: 32rpx;
			color: #ffffff;
			text-align: center;
			border-radius: 40rpx;
		}
	}
}

.container2 {
	width: 92vw;
	background: #ffffff;
	border-radius: 32rpx;
	.card-img {
		width: 92vw;
		height: 45vw;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;
		image {
			width: 92vw;
			height: 45vw;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
		}
		.card-tag1 {
			position: absolute;
			bottom: 20rpx;
			left: 18rpx;
			padding: 4rpx 16rpx 4rpx 6rpx;
			background: rgba(0, 0, 0, 0.41);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			.ico {
				width: 20px;
				height: 20px;
				image {
					width: 20px;
					height: 20px;
				}
			}
			.text {
				height: 18px;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight:500;
				font-family:PingFangSC-Medium,PingFang SC;
			}
		}
		.card-tag2 {
			position: absolute;
			bottom: 20rpx;
			left: 160rpx;
			padding: 4rpx 16rpx 4rpx 6rpx;
			background: rgba(0, 0, 0, 0.41);
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			.ico {
				width: 20px;
				height: 20px;
				image {
					width: 20px;
					height: 20px;
				}
			}
			.text {
				height: 18px;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight:500;
				font-family:PingFangSC-Medium,PingFang SC;
			}
		}
	}
	.card-info {
		padding: 15rpx 10rpx 15rpx 10rpx;
		position: relative;
		.title {
			display: flex;
			align-items: center;
			.titles {
				font-size: 32rpx;
				// font-weight: bold;
				font-family:PingFangSC-Semibold,PingFang SC;
				font-weight:600;
			}
			.text {
				margin-left: 20rpx;
				font-size: 32rpx;
				// font-weight: bold;
				font-family:PingFangSC-Semibold,PingFang SC;
				font-weight:600;
			}
			.tag {
				width: 80rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #fe7063;
				margin-left: 20rpx;
				font-weight: bold;
				font-size: 24rpx;
				border-radius: 30rpx;
				box-sizing: border-box;
				border: 2rpx solid #fe7063;
				background: rgba(254, 112, 99, 0.14);
			}
		}
		.label-info {
			display: flex;
			align-items: center;
			.tag {
				width: 80rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				color: #ffffff;
				font-size:20rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				border-radius: 30rpx;
				box-sizing: border-box;
				border: 1rpx solid rgba(219, 167, 99, 1);
				background:linear-gradient(270deg,rgba(255,219,172,0.93) 0%,rgba(216,164,94,1) 100%);
			}
			.text {
				margin-left: 10rpx;
				font-size:24rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				color: rgba(153, 153, 153, 1);
			}
		}
		.label-time {
			display: flex;
			align-items: center;
			height: 30px;
			.time {
				height: 30px;
				image {
					width: 15px;
					height: 15px;
				}
			}
			.text {
				height: 30px;
				margin-left: 10rpx;
				font-size: 24rpx;
				color: rgba(153, 153, 153, 1);
			}
		}
		.btn {
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: rgba(255, 100, 86, 1);
			font-weight: blod;
			font-size: 32rpx;
			color: #ffffff;
			text-align: center;
			border-radius: 40rpx;
			position: absolute;
			bottom: 20px;
			right: 15px;
		}
	}
}
</style>
